<template>
  <view id="homesidebar">
    <scroll-view class="scroll_view" scroll-y>
      <view class="list_box">
        <view
          @tap="useActiveStore.setActivePage(item.name)"
          class="menu_item"
          :class="{ active: item.name === useActiveStore.activePage }"
          v-for="(item, index) in userStore.MenuString.MenuList"
          :key="index">
          <image
            v-if="item.name === useActiveStore.activePage"
            class="medium_Icon"
            :src="`../../static/img/sidebar/${item.name}.png`" />
          <image
            v-else
            class="medium_Icon"
            :src="`../../static/img/sidebar/${item.name}_b.png`" />
          <text class="menu_name fs_15">
            {{ item.label }}
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from "@/stores";
import { useActivePageStore } from "@/stores/modules/activePage";
const useActiveStore = useActivePageStore();
const userStore = useMemberStore();
</script>

<style lang="scss" scoped>
#homesidebar {
  width: 100%;
  height: 100%;
  .scroll_view {
    padding: 10px 0px;
    height: 100%;
    width: 100%;
    .list_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .menu_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0px;
        &.active {
          color: #32966f;
        }
      }
    }
  }
}
</style>
